<template>
    <view class="service-panel">
      <!-- 关闭按钮 -->
      <text class="close iconfont icon-guanbi" @click="emit('close')"></text>
      <!-- 标题 -->
      <view class="title">服务说明</view>
      <!-- 内容 -->
      <view class="content">
        <view class="item">
          <view class="dt">无忧退货</view>
          <view class="dd">
            自收到商品之日起30天内，可在线申请无忧退货服务（食品等特殊商品除外）
          </view>
        </view>
        <view class="item">
          <view class="dt">快速退款</view>
          <view class="dd">
            收到退货包裹并确认无误后，将在48小时内办理退款，
            退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账
          </view>
        </view>
        <view class="item">
          <view class="dt">满88元免邮费</view>
          <view class="dd">
            单笔订单金额(不含运费)满88元可免邮费，不满88元， 单笔订单收取10元邮费
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  const emit =  defineEmits(['close'])
  </script>
  
  <style lang="scss">
  .service-panel {
    padding: 0 30rpx;
    border-radius: 10rpx 10rpx 0 0;
    position: relative;
    background-color: #fff;
  }
  
  .title {
    line-height: 1;
    padding: 40rpx 0;
    text-align: center;
    font-size: 32rpx;
    font-weight: normal;
    border-bottom: 1rpx solid #ddd;
    color: #444;
  }
  
  .close {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    font-size: 50rpx;
  }
  
  .content {
    padding: 20rpx 20rpx 100rpx 20rpx;
  
    .item {
      margin-top: 20rpx;
    }
  
    .dt {
      margin-bottom: 10rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      position: relative;
  
      &::before {
        content: '';
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background-color: #eaeaea;
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        left: -20rpx;
      }
    }
  
    .dd {
      line-height: 1.6;
      font-size: 26rpx;
      color: #999;
    }
  }
  </style>